@layout("/common/_container.html"){
<link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>渠道统计</h5>
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;">
                <h3 style="width:100px;margin-left: 20px;marker-offset: 15px;">图表分析</h3>
                <div style="width: 100%;">
                    <div style="float: right;width: 300px;display: flex;flex-direction: row;">
                        <div id="div-channelList" style="width: 200px;"></div>
                        <button id="demo1-getValue" style="width: 80px;margin-left: 10px; margin-right: 10px;color: white;border: none;background-color: #08a6ef;" onclick="VpnChannelActionInfo.btnSelectChannel()">确定</button>
                    </div>
                </div>
            </div>
            <div class="ibox-content">
                <div>
                    <div style="display: flex;flex-direction: row;align-items: center;background-color: #f5f6fa">
                        <h3 style="width: 100%;float: left;">总量统计</h3>
                        <div style="display: flex;
                            flex-direction: row;
                            width: 100px;
                            height: 30px;
                            float: right;
                            margin-left: -100px;">
                            <select id="totalSelect" onchange="VpnChannelActionInfo.selectChange()"
                                    style="width: 100%;float: left">
                                <option value="">所有时间</option>
                                <option value="0">今天</option>
                                <option value="1">昨天</option>
                                <option value="7">最近七天</option>
                                <option value="30">最近30天</option>
                            </select>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row; margin-top: 20px;">
                        <div style="width: 25%;align-items: center;
                            display: flex;flex-direction: column;">
                            <h2>访问量</h2>
                            <br>
                            <h3 id="pvCount">0</h3>
                        </div>
                        <div style="width: 25%;align-items: center;display: flex;flex-direction: column;">
                            <h2>访问用户数</h2>
                            <br>
                            <h3 id="uvCount">0</h3>
                        </div>
                        <div style="width: 25%;align-items: center;display: flex;flex-direction: column;">
                            <h2>安装量</h2>
                            <br>
                            <h3 id="downloadCount">0</h3>
                        </div>
                        <div style="width: 25%;align-items: center;display: flex;flex-direction: column;">
                            <h2>注册量</h2>
                            <br>
                            <h3 id="registerCount">0</h3>
                        </div>
                    </div>
                </div>
                <br>
                <div style="margin-top: 20px;">
                    <div style="display: flex;flex-direction: row;align-items: center;background-color: #f5f6fa">
                        <h3 style="width: 100%;float: left;">增长趋势</h3>
                        <div style="display: flex;
                            flex-direction: row;
                            width: 100px;
                            height: 30px;
                            float: right;
                            margin-left: -100px;">
                            <select id="lineSelect" onchange="VpnChannelActionInfo.lineSelectChange()"
                                    style="width: 100%;float: left">
                                <option value="">所有时间</option>
                                <option value="0">今天</option>
                                <option value="1">昨天</option>
                                <option value="7">最近七天</option>
                                <option value="30">最近30天</option>
                            </select>
                        </div>
                    </div>

                    <div id="channelIncreaseChart"
                         style="width:100%;
                             height: 400px;
                             margin-top: 10px;"></div>
                </div>


                <div style="margin-top: 20px;">
                    <div style="display: flex;flex-direction: row;align-items: center;background-color: #f5f6fa">
                        <h3 style="width: 100%;float: left;">漏斗分析</h3>
                        <div style="display: flex;
                            flex-direction: row;
                            width: 100px;
                            height: 30px;
                            float: right;
                            margin-left: -100px;">
                            <select id="funnelSelect" onchange="VpnChannelActionInfo.funnelSelectChange()"
                                    style="width: 100%;float: left">
                                <option value="">所有时间</option>
                                <option value="0">今天</option>
                                <option value="1">昨天</option>
                                <option value="7">最近七天</option>
                                <option value="30">最近30天</option>
                            </select>
                        </div>
                    </div>

                    <div style="display: flex;flex-direction: row;">
                        <div id="channelFunnelCharts"
                             style="width:80%;
                             height: 300px;"></div>
                        <div style="width: 20%;padding: 70px 0">
                            <h2>总转化率：</h2>
                            <h3 id="registerRate">注册：0%</h3>
                            <h3 id="buyRate">购买：0%</h3>
                        </div>
                    </div>

                </div>

                <div class="row row-lg">

                    <h3 style="font-size: 22px;
                                margin-left: 15px;">| 数据分析</h3>
                    <div style="display: flex;
                        flex-direction: row;
                        margin-left: 15px;margin-right: 15px;margin-top: 20px;">
                        <div style="display: flex;
                            flex-direction: row;
                            margin-left: 15px;
                            align-items: center;">
                            <h5>开始日期</h5>
                            <input id="beginTime" style="height: 30px;margin-left: 10px;"/>
                        </div>
                        <div style="display: flex; flex-direction: row; margin-left: 15px;align-items: center;">
                            <h5>结束日期</h5>
                            <input id="endTime" style="height: 30px;margin-left: 10px;"/>
                        </div>
                        <button style="color: #f1f1f1;
                                    background-color: #0e9aef;
                                    border: none;
                                    margin-right: 15px;
                                    margin-left: 15px;
                                    width: 50px;
                                    height: 30px;" onclick="VpnChannelActionInfo.search()">查询</button>

                        <a style="color: #f1f1f1;
                                    align-content: center;
                                    background-color: #07a345;
                                    border: none;
								    line-height:30px;
								    text-align: center;
                                    width: 50px;
                                    height: 30px;" onclick="VpnChannelActionInfo.exportExcl()">导出</a>
                    </div>
                    <div class="col-sm-12">
                        <table class="layui-table-body"
                               id="table" layout-filter="info2" style="margin-top: 30px;"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!--<script type="text/javascript" src="${ctxPath}/static/dist/echarts.min.js" charset="utf-8"></script>-->
<!--<script type="text/javascript" src="${ctxPath}/static/dist/echarts.common.min.js" charset="utf-8"></script>-->
<script src="${ctxPath}/static/js/common/DateUtils.js" charset="utf-8"></script>
<script src="${ctxPath}/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxPath}/static/dist/xm-select.js" charset="utf-8"></script>
<script src="${ctxPath}/static/modular/vpn_channel_action_info/vpnChannelActionInfo/vpnChannelActionInfo.js"></script>
<script>
    laydate.render({
        elem: '#beginTime'
    });
    laydate.render({
        elem: '#endTime'
    });
</script>
@}
